Remove box shadow from the default appender inserter button hover state #14936
Conversation
Fixes #14853. This removes the box shadow on the inserter button that appears to the left of the default block appender (or to the right on mobile). This brings the hover state in line with the hover state for the sibling inserter.
kjellr
added
[Type] Bug
kjellr
changed the title
|
One design consideration here: This makes the inserter hover match that of the sibling inserter, but it also takes it out of a alignment with the hover state of the mover blocks that also appear on the left. I'm not sure that's actually better. 😕
(Also, I'm noticing for the first time that the inserter button shows up way to the left of where the block mover icons appear... that seems like a separate bug to fix. 😄) |
|
I've always felt that a circle button with a circle icon felt a little forced. Kinda like wearing a bands t-shirt to the concert. 😄
Wonder how this would look with a regular ➕ icon, in a round button with a border? It would essentially look the same but perhaps a little more noticeable/actionable? |
I think it's a small improvement, namely because the circle shape didn't work super duper for the inserter as Marty notes. I think this is better. But yes, let's definitely continue to iterate these style separately. I'm exploring SUUUPER early button hover/focus states in this screenshot, but they are so early that I share it only as a link not an inline image :D — but in any case, once we have a solid style for buttons, it'd be good to look at them all holistically. One important consideration — the movers have backgrounds because they may overlap other content in nested situations (where even the neutral state has a background), like this:
That neutral background doesn't look great at all, btw and is also worth tightening up. But no, the problem doesn't extend to the button this PR touches, because in nested contexts, the plus is inside, and on the right:
|
|
Thanks folks! |
Fixes WordPress#14853. This removes the box shadow on the inserter button that appears to the left of the default block appender (or to the right on mobile). This brings the hover state in line with the hover state for the sibling inserter.
Fixes #14853. This removes the box shadow on the inserter button that appears to the left of the default block appender (or to the right on mobile). This brings the hover state in line with the hover state for the sibling inserter.
Fixes #14853. This removes the box shadow on the inserter button that appears to the left of the default block appender (or to the right on mobile). This brings the hover state in line with the hover state for the sibling inserter.
Fixes #14853.
This removes the box shadow on the inserter button that appears to the left of the default block appender (or to the right on mobile).
This brings the hover state in line with the hover state for the sibling inserter.
Before:
After:
